<template>
  <div>
      <van-cell class="title" :title="cellName" :border="false" >
        <template #right-icon>
          <van-icon name="ellipsis" size="0.6rem" />
        </template>
      </van-cell>
      <van-cell v-for="obj in songList" :key="obj.id" center :title="obj.name" :border="false" :label="obj.song.artists[0].name + ' - ' + obj.name" label-class="label" :icon="obj.picUrl" class="van-ellipsis">
        <template #right-icon>
          <van-icon name="play-circle-o" size="0.6rem" @click="playFn"/>
        </template>
      </van-cell>
  </div>
</template>

<script>
export default {
  props: {
    name: String, // 歌名
    author: String, // 歌手
    id: Number, // 歌曲id (标记这首歌曲-为将来跳转播放页做准备)
    img: String, // 歌曲图片
    songList: Array,
    cellName: String // 标题名称
  },
  methods: {
    playFn () {
      this.$router.push({
        path: '/play',
        query: {
          id: this.id // 歌曲id, 通过路由跳转传递过去
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

.title{
 background-color:rgba(0,0,0,0);
 font-weight: bold;
}
/* 给单元格设置底部边框 */
.van-ellipsis {
  position: relative;
  color: white;
  border-bottom: 1px solid lightgray;
  background: rgba(0,0,0,0);
  .label{
    color:lavender;
  }
  .van-cell__title{
    margin-left: 70px;
  }
  .van-icon{
    margin: 0;
    padding: 0;
  }
  .van-icon__image{
    position: absolute;
    top: -18px;
    width: 60px;
    height: 60px;
    border-radius:10px;
  }
}

</style>